{% load i18n %}
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<style>
    .day-limit {
        color: #f0f0f0;
        font-size: 12px;
    }

    .day-limit .black {
        margin: 0px 20px 0px 0px ;
    }

    .balance_search {
        width: 140px;
        height: 30px;
        font-size: 14px;
        color: #666;
    }

    .hide_small_assets {
        position:static;
    }

    .search_input > input {
        width: 120px;
        height: 24px;
        line-height: 24px;
        text-indent: 25px;
        border: 1px solid #d4d4d4;
        z-index:12;
        position:absolute;
        padding-left:2px;
    }

    .search_input_i {
        color: #999;
        font-size: 16px;
        position:absolute;
        z-index:101;
    }

    .balances-title {
        font-size: 18px;
        color: #454540;
        height: 32px;
        line-height: 32px;
    }

    .context-body table th {
        background: #f6f6f6;
        color: #999;
    }

    .context-body table {
        border: 1px solid #e5e7ea;
        font-size: 14px;
    }

    .context-body tr {
        border: 0px;
        border-top: 1px solid ##f0f4fa!important;
        padding: 0;
    }

    .context-body td, .context-body th {
        padding: 4px 0px 4px 0px!important;
        text-align: center;
        line-height: 20px;
        font-size: 12px;
        border-top: 0px;
        color: #666;
    }

    .context-body .opt {
        min-width: 240px;
    }

    .context-body tbody .balance_btn .btn {
        display: inline-block;
        min-width: 50px;
        max-width: 80px;
        height: 20px;
        text-align: center;
        line-height: 20px;
        font-size: 12px;
        color: #666;
        border: 1px solid #e5e7ea;
        padding: 0 2px;
        margin-left: 6px;
        background: #fff;
        border-radius: 0px;
    }

    .context-body tbody tr:hover {
        background: rgba(231,178,67,0.05);
    }

    .collapse_detail {
        margin:0px 10px;
    }

    .context-body tbody .balance_btn .btn:hover{background:#e8b342;border-color:#e8b342;color:#fff;}
    .context-body tbody .balance_btn .btn.disabled{cursor:not-allowed;color:#ababab;}
    .context-body tbody .balance_btn .btn.disabled:hover{background:none!important;border-color:#e5e7ea;}

    #balance-detail-first-td {
        text-indent: 20px;
        text-align: left;
    }
</style>

<script>
    $(document).ready(function() {
        $("#nav-balances").addClass("active");
        get_balances()
        get_coin_type_price()

        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
            active_tab = e.target.getAttribute('id');
            console.log("id [%s] " , active_tab )
            $("#tab_balances").removeClass("active");
            $("#tab_deposites").removeClass("active");
            $("#tab_withdrawes").removeClass("active");
            $("#tab_deposites_legal").removeClass("active");
            $("#tab_withdrawes_legal").removeClass("active");

            $("#tab_balances").addClass("line");
            $("#tab_deposites").addClass("line");
            $("#tab_withdrawes").addClass("line");
            $("#tab_deposites_legal").addClass("line");
            $("#tab_withdrawes_legal").addClass("line");

            $("#"+active_tab).addClass("active");
            $("#"+active_tab).removeClass("line");
            if (active_tab == "tab_balances") {
                get_balances()
            }
            //if (active_tab == "tab_deposites") {
            //    get_deposites()
            //}
            //if (active_tab == "tab_withdrawes") {
            //    get_withdrawes()
            //}
            //if (active_tab == "tab_deposites_legal") {
            //    get_deposites_legal()
            //}
            //if (active_tab == "tab_withdrawes_legal") {
            //    get_withdrawes_legal()
            //}
        });
    })

    function get_coin_type_price() {
        setInterval(timer_get_total_amount, 10000);
    }

    g_balance_data = {}
    function timer_get_total_amount() {
        $.post("{% url 'get_coin_price' %}",
        {},
        function(obj) {
            var total = get_total_amount(obj)
            total= total.toFixed(2)
            total = Calculate.CommaFormattedOnly(total)
            $("#total_amount_cny").html(total)
        })
    }

    function get_total_amount(data_price) {
        var total = 0
        var data = g_balance_data

        for (i = 0; i < data.length; i++) {
            var row = data[i]
            var coin_type = row.coin_type
            var count = row.amount
            var use_coin_type = 'bitcny'
            var freeze = row.freeze

            var price = 0
            if (data_price.hasOwnProperty(coin_type)) {
                price = data_price[coin_type]
                var amount = price * (count + freeze)
                total += amount
                amount = amount.toFixed(2)
                amount = Calculate.CommaFormattedOnly(amount)
                var cny_id = "#" + row.coin_type + "_cnyid"
                $(cny_id).html(amount)
            }

        }
        return total
    }

    function get_balances() {
        //var userid = $("#userid").val();
        $.post("/btc/get_balances",
        {},
        function(data) {
            //console.log("balances " + JSON.stringify(data))
            g_balance_data = data
            var data = sort_by_weight(data, 'weight', g_coin_info)
            var data = {
                jsonobj: data,
                g_coin_info: g_coin_info,
                g_markets: g_markets,
            }

            var html = template('temp_balances_detail', data);
            document.getElementById('balances').innerHTML = html;
            //init_inlink_svg()
            init_balances_collapse()
            init_search(data)
            onclick_hide_small_assets(data)
            timer_get_total_amount()
        });
    }

    /* delete
    function get_withdrawes(){
        // var userid = $("#userid").val();
        //onsole.log("get withdrawes ")
        $.post("/btc/get_withdrawes",
        {},
        function(data){
            //onsole.log("withdrawes "  + JSON.stringify(data))
            data = data.reverse()
            var data = {
                jsonobj: data,
            }
            var html = template('temp_withdrawes', data);
            document.getElementById('withdrawes').innerHTML = html;
            init_withdrawes_collapse()
        }
        );
    }

    function get_deposites(){
        // var userid = $("#userid").val();
        //console.log("get deposites ")
        $.post("/btc/get_deposites",
        {},
        function(data){
            //console.log("deposites "  + JSON.stringify(data))
            var data1 = data.reverse()
            var data = {
                jsonobj: data,
            }
            var html = template('temp_deposites', data);
            document.getElementById('deposites').innerHTML = html;
            init_deposites_collapse()
        }
        );
    }
    */
</script>
